<template>
  <div class="flex container">
    <x-icon type="ios-close-empty" size="50" @click.native="$router.back()" class="backBtn"></x-icon>
    <div class="form">
      <text-input placeholder="输入手机号码" type="number" v-model="phoneNum" class="phoneNumInput form-input"></text-input>

      <text-input placeholder="验证码" type="number" v-model="code" class="form-input">
        <div slot="right" class="getCodeBtn" @click="getCode" :class="{ disabled }">
          {{  disabled ? countdown + '秒' : '获取验证码' }}
        </div>
      </text-input>

      <text-input placeholder="请输入密码" type="password" v-model="password" class="phoneNumInput form-input"></text-input>

      <div class="submitBtn" @click="submit">确定</div>
    </div>
  </div>
</template>

<script>
import TextInput from '@c/form/TextInput'
import test from '@u/test.js'
import md5 from 'js-md5';

export default {
  components: {
    TextInput
  },

  data (){
    return {
      phoneNum: '',
      password: '',
      code: '',
      disabled: false,
      countdown: 60,
      intervalKey: 0
    }
  },

  watch: {
    countdown (val){
      if(val <= 0){
        this.disabled = false
        clearInterval(this.intervalKey)
        this.countdown = 60
      }
    }
  },

  methods: {
    checkPhoneNum (){
      if(!this.phoneNum){
        this.$alert.toast('请先输入手机号码')
        return false
      }

      if(!test.phoneNum(this.phoneNum)){
        this.$alert.toast('请输入正确格式的手机号码')
        return false
      }

      return true
    },
    checkPassword () {
        if(!this.password){
            this.$alert.toast('请输入密码')
            return false
        }

        if(!test.password(this.password)){
            this.$alert.toast('请输入正确格式的密码')
            return false
        }

        return true
    },
    // 获取验证码
    getCode (){
      if(!this.checkPhoneNum()) { return }
      _api('common/sendVertifyCode', { phonenum: this.phoneNum })
      .then(data =>{
        this.$alert.toast('验证码发送成功，请注意查收')
        this.disabled = true
        this.intervalKey = setInterval(() => this.countdown--, 1000)
      })
    },

    submit (){
      if(!this.checkPhoneNum()){ return }
      if(!this.checkPassword()){ return }
      if(!this.code){
        this.$alert.toast('验证码不能为空')
        return
      }

      _api('user/bindPhonenum', {
        phonenum: this.phoneNum,
        password: md5(this.password),
        verify_code: this.code
      }).then(data =>{
        this.$router.back()
        this.$store.commit('user/set', data)
        this.$alert.alert('绑定手机成功')
      })
    }
  }
}
</script>

<style lang="less" scoped>
.container{
  background-color: white;

  .form{
    padding: 0 20px;
    margin-top: 70px;
  }
}

/deep/ .textInput:not(foo){
  height: 35px;
}

.backBtn{
  fill: @subtext;
  position: fixed;
  right: 10px;
  top: 10px;
}

.input-border{
  border: 1px #ccc solid;
  padding: 5px;
}

.getCodeBtn{
  min-width: 5em;
  border: 1px @theme solid;
  color: @theme;
  padding: 5px 7px;
  margin-left: 20px;
  text-align: center;
}

.submitBtn{
  width: 80%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  margin: 50px auto 0 auto;
  background-color: @theme;
  color: white;
  border-radius: 5px;
}

.disabled{
  border-color: @subtext;
  color: @subtext;
}

.form-input{
  margin: 25px 0 !important;
}
</style>
